<template>
  <ul v-if="props.type === FileType.Image" class="el-upload-list el-upload-list--picture-card">
    <li v-for="(item ,index) in paths" :key="index" class="el-upload-list__item is-ready">
      <div class="image-box">
        <el-image :src="conmmStore.setting.fileDomain + item" class="el-upload-list__item-thumbnail" />       
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handleImagePreview(item)">
            <el-icon><zoom-in /></el-icon>
          </span>
          <span class="el-upload-list__item-delete" @click="handleImageRemove(index)">
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </li>
    <li v-if="paths.length < props.limit" @click="imageDialogVisible = true" class="el-upload el-upload--picture-card">
      <el-icon><Plus /></el-icon>
    </li>
  </ul>
  <ul v-else class="el-upload-list el-upload-list--picture-card">
    <li v-if="paths[0]" class="el-upload-list__item is-ready">
      <div class="image-box">
        <el-image :src="conmmStore.setting.fileDomain + paths[0].cover" class="el-upload-list__item-thumbnail" />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handleVideoPreview(paths[0])">
            <el-icon><View /></el-icon>
          </span>
          <span
             class="el-upload-list__item-delete" @click="handleImageRemove(0)">
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </li>
    <li v-else @click="imageDialogVisible = true" class="el-upload el-upload--picture-card">
      <el-icon><Plus /></el-icon>
    </li>
  </ul> 
 <DialogFile v-model:visible="imageDialogVisible" :type="props.type" :limit="props.limit - paths.length" @on-confirm="handleConfirm" />
 <el-image-viewer v-if="imageViewer.visible" :url-list="[imageViewer.url]" @close="imageViewer.visible = false" />
 <!--查看视频-->
 <el-dialog  width="600px" v-model="videoViewer.dialogVisible">
    <video style="max-width:560px" controls :src="conmmStore.setting.fileDomain  + videoViewer.path" :autoplay="true"></video>
  </el-dialog>
    <!--查看视频 end-->
</template>
<script lang="ts" setup>
import {ZoomIn, Delete, Plus,View} from '@element-plus/icons-vue'
import { ref, reactive, watch, onMounted} from 'vue'
import {useCommonStore} from '@/stores/common'
import DialogFile from '@/components/File/DialogFile.vue'
import {FileType} from '@/utils/enum'
const conmmStore = useCommonStore()
interface Props {
    type: FileType,
    limit: number,
    modelValue:any,
    tips:string
 }
 const props = withDefaults(defineProps<Props>(), {
    type:FileType.Image,
    limit:1,
    modelValue:[],
    tips:''
  })
/** 查看图片 */
const imageViewer = reactive({
  visible:false,
  url :''
})
/** 查看视频 */
const videoViewer = ref<any>({
  dialogVisible:false,
  path:'',
  cover:''
 })
/**
 * 选中的图片
 */
const paths = ref<any[]>([])
/**
 * 图片选择对话框
 */
const imageDialogVisible = ref(false)
interface Emits {
  (e: 'update:modelValue', value: any): void
}
const emit = defineEmits<Emits>()
watch(()=>props.modelValue,(n,o) =>{
  paths.value= []
   if(props.limit === 1)
    {
      if(n.length > 0) paths.value.push(n)
      else paths.value = []
    }
   else {
    if(n.length > 0) 
     paths.value.push(...n)
    else paths.value = []
   }
}, { immediate: true })
/**
 * 查看图片
 * @param url  图片地址
 */
const handleImagePreview = (url:string):void => {
  imageViewer.visible = true
  imageViewer.url = conmmStore.setting.fileDomain +  url
}
const handleImageRemove = (index:number):void => {
  paths.value.splice(index,1)
  emit('update:modelValue',paths.value)
}

/**
 * 确认选择
 */
const handleConfirm = (list: any) => {
  paths.value.push(...list)
  if(props.limit === 1){
     emit('update:modelValue', paths.value.length > 0 ? paths.value[0] :'')
  }
  else  emit('update:modelValue', paths.value)
}
const handleVideoPreview = (item:any) => {
  videoViewer.value.dialogVisible = true
  videoViewer.value.path =  item.path
  videoViewer.value.cover =  item.cover
}
onMounted(() => {
  if(!conmmStore.setting.fileDomain)
    conmmStore.getSetting()
})
</script>
<style lang="scss" scoped>

.video {
  width: 300px;
}
.el-upload-list {
  display: flex;
}
.el-upload-list__item {
   display: flex;
  align-items:center;
}
.image-box {
  align-items:center;
}
</style>
